import {Layout, Menu, Breadcrumb} from 'antd';
import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons';
import logo from './logo.png';
import {adminRoutes} from "../routes";
import { HashRouter as Router , Route, Link, Switch } from 'react-router-dom'
const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;

function Frame(props) {
    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Header className="header">
                <div className="logo">
                    <img width="50px" src={logo} />
                </div>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{height: '100%', borderRight: 0}}
                    >
                        {
                            adminRoutes.filter(route => route.show).map(route => {
                                return <SubMenu key={route.title} icon={<UserOutlined/>} title={route.title}>
                                    {route.children.filter(m => m.show).map(m => {
                                        return <Menu.Item key={m.path}><Link to={m.path}>{m.title}</Link></Menu.Item>
                                        // return <Menu.Item key={m.path} onClick={p => props.history.push(p.key)}>{m.title}</Menu.Item>
                                    })}
                                </SubMenu>
                            })
                        }

                    </Menu>
                </Sider>
                <Layout style={{padding: '0 24px 24px'}}>
                    {/*<Breadcrumb style={{margin: '16px 0'}}>*/}
                    {/*    <Breadcrumb.Item>Home</Breadcrumb.Item>*/}
                    {/*    <Breadcrumb.Item>List</Breadcrumb.Item>*/}
                    {/*    <Breadcrumb.Item>App</Breadcrumb.Item>*/}
                    {/*</Breadcrumb>*/}
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

export default Frame